<template>
  <div class="workbench-box">
    <div class="info-top">
      <div class="info-top-left">
        <div>
          <div class="title">Welcome back {{ userInfo.name }} !</div>
          <div class="desc">欢迎使用银行后台管理系统</div>
        </div>
        <el-icon size="100" color="#84d0b2"><Avatar /></el-icon>
      </div>
      <div class="info-top-right">
        <div class="custom-box">
          <div class="custom-text">
            <div class="number">{{ statistics.customNum || 0 }}人</div>
            <div class="sub-title">我的客户</div>
          </div>
          <el-icon size="40" color="#14ae7c"><UserFilled /></el-icon>
        </div>
        <div class="money-box">
          <div class="money-text">
            <div class="number">{{ statistics.notCollectionSum || 0 }}万元</div>
            <div class="sub-title">待催金额</div>
          </div>
          <el-icon size="40" color="#15bedd"><Coin /></el-icon>
        </div>
      </div>
    </div>
    <div class="info-bottom">
      <div ref="pieChartRef" class="chart-container"></div>
      <div ref="chartRef" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { UserFilled, Avatar, Coin } from "@element-plus/icons-vue";
import * as echarts from "echarts";

const userInfo = reactive({ name: "admin" });

const statistics = reactive({
  customNum: 158,
  notCollectionSum: 30296.56,
});

// 用于引用柱状图容器的 ref
const chartRef = ref<HTMLElement | null>(null);
// 用于引用饼图容器的 ref
const pieChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
  // 初始化柱状图
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    const option = {
      title: {
        text: "催收情况统计",
      },
      tooltip: {},
      xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20, 15],
          itemStyle: {
            color: "#0e8153",
          },
        },
      ],
    };
    chart.setOption(option);
  }

  // 初始化饼图
  if (pieChartRef.value) {
    const pieChart = echarts.init(pieChartRef.value);
    const pieOption = {
      title: {
        text: "客户类型分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      series: [
        {
          name: "客户类型",
          type: "pie",
          radius: "50%",
          data: [
            { value: 735, name: "普通客户" },
            { value: 580, name: "逾期客户" },
            { value: 484, name: "不良客户" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    pieChart.setOption(pieOption);
  }
});
</script>

<style scoped lang="scss">
@use "./index.scss";

.chart-container {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
